<template>
	<view class="main">
		<view class="welcome">
			<text>您好！</text>
			<text>欢迎登录华新精科。</text>
		</view>
		<view class="box">
			<view class="content">
				<FormWrap>
					<view class="logo">
						<image :src="ICON_LOGO" mode="widthFix" />
					</view>
					<u-form labelPosition="left" :model="model" label-width="16rem" labelAlign="left" :rules="rules"
						ref="uForm">
						<u-form-item label="账号" prop="username">
							<InputField v-model="model.username" placeholder="请输入账号" clearable />
						</u-form-item>
						<u-form-item label="密码" prop="password">
							<InputField v-model="model.password" type="password" placeholder="请输入密码" clearable />
						</u-form-item>
						<u-form-item label="验证码" prop="code">
							<InputCaptcheField v-model="model.code" @generateUUID="generateUUID" ref="code" />
						</u-form-item>
						<u-form-item label="连接点" prop="conn">
							<SingleSelect v-model="conn" :list="conns" mode="single" @change="changeConn" />
						</u-form-item>
					</u-form>
					<template slot="footer">
						<view class="u-flex-column">
							<Button large type="primary" :loading="btnLoading" @click="submit">
								登录
							</Button>
						</view>
					</template>
				</FormWrap>
			</view>
			<view class="version">{{ 'V' + version }}</view>
		</view>
	</view>
</template>

<script>
	import FormWrap from '@/components/formWrap/index.vue';
	import InputField from '@/components/formField/inputField/index.vue';
	import InputCaptcheField from '@/components/formField/inputCaptcheField/index.vue';
	import SingleSelect from '@/components/formField/singleSelect/index.vue';
	import Button from '@/components/button/index.vue';
	import fetch from '@/utils/fetch';
	import {
		setToken,
		setUserInfo,
		setConn,
		getConn,
		setMenu,
	} from "@/store/user";
	import ICON_LOGO from './img/M.png';
	import {
		downloadFun
	} from '@/utils/download';

	export default {
		components: {
			FormWrap,
			InputField,
			InputCaptcheField,
			Button,
			SingleSelect,
		},
		data() {
			return {
				version: '',
				ICON_LOGO,
				btnLoading: false,
				conns: [],
				conn: '',
				model: {
					username: '',
					password: '',
					checkKey: '',
					code: '',
				},
				rules: {
					username: {
						type: "string",
						required: true,
						message: "请填写账号",
						trigger: ["blur", "change"],
					},
					password: {
						type: "string",
						required: true,
						message: "请填写密码",
						trigger: ["blur", "change"],
					},
					code: {
						type: "string",
						required: true,
						message: "请填写验证码",
						trigger: ["blur", "change"],
					},
				},
			};
		},
		methods: {
			getConns() {
				setTimeout(() => {
					this.conns = [{
						label: '外网节点',
						value: '外网节点',
						mes: 'http://114.220.176.104:90',
						wms: 'http://114.220.176.104:91',
					}, {
						label: '内网节点',
						value: '内网节点',
						mes: 'http://172.16.100.203:90',
						wms: 'http://172.16.100.203:91',
					}, {
						label: '测试外网节点',
						value: '测试外网节点',
						mes: 'http://180.100.216.225:90',
						wms: 'http://180.100.216.225:90',
					}, {
						label: '测试内网节点',
						value: '测试内网节点',
						mes: 'http://192.168.0.134:90',
						wms: 'http://192.168.0.134:91',
					}
					// , {
					// 	label: '生产环境外网',
					// 	value: '生产环境外网',
					// 	mes: 'http://121.224.59.152:90',
					// 	wms: 'http://121.224.59.152:90',
					// },
					];
					const hisConn = getConn();
					if (hisConn && this.conns.find(item => item.label === hisConn.label)) {
						this.conn = hisConn.label;
					} else {
						this.conn = this.conns[0].label;
						setConn(this.conns[0]);
					}
				}, 10);
			},
			changeConn(value) {
				const conn = this.conns.find(item => item.label === value);
				setConn(conn);
			},
			submit() {
				const that = this;
				this.$refs.uForm
					.validate()
					.then((res) => {
						that.btnLoading = true;
						setTimeout(function() {
							that.btnLoading = false;
						}, 1000);
						fetch('post', '/basic/token/login', {}, that.model, null, false).then(res => {
							setToken(res.token)
							setUserInfo(res);
							// #ifdef H5
							// web调试直接登录
							this.$toast("登录成功", () => {
								that.btnLoading = false;
								// uni.navigateTo({
								// 	url: "/pages/home/index",
								// 	animationType: "pop-in",
								// 	animationDuration: 1000,
								// });
								uni.redirectTo({
									url: "/pages/home/index",
									animationType: "pop-in",
									animationDuration: 1000,
								})
							});
							// #endif

							// #ifdef APP-PLUS
							// APP检查更新再登录
							const app = uni.getSystemInfoSync();
							fetch('get', '/basic/sys/getMobileVersion?type=pad', {}, {}, {}, false).then(
								res => {
									if (res.version !== app.appWgtVersion) {
										downloadFun('/static/file/apk/pad/pad.apk', () => {
											that.btnLoading = false;
										});
									} else {
										this.$toast("登录成功", () => {
											that.btnLoading = false;
											// uni.navigateTo({
											// 	url: "/pages/home/index",
											// 	animationType: "pop-in",
											// 	animationDuration: 1000,
											// });
											uni.redirectTo({
												url: "/pages/home/index",
												animationType: "pop-in",
												animationDuration: 1000,
											})
										});
									}
								})
							// #endif
						}, () => {
							that.btnLoading = false;
							this.$refs['code'].reset();
						}).catch(() => {
							that.btnLoading = false;
							this.$refs['code'].reset();
						}).finally(() => {
							that.btnLoading = false
						})
					})
					.catch(() => {});
			},
			generateUUID(uuid) {
				this.model.checkKey = new Date().valueOf() + '';
				this.model.uuid = uuid;
			},
		},
		onShow() {
			if (this.$refs['code'])
				this.$refs['code'].reset();
		},
		beforeMount() {
			this.getConns();
			// #ifdef APP-PLUS
			// APP检查更新再登录
			const app = uni.getSystemInfoSync();
			this.version = app.appWgtVersion;
			// #endif
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		position: relative;
		background: url(~@/static/login-bj.jpg) no-repeat;
		display: flex;
		background-size: cover;
		height: 100vh;

		.welcome {
			margin: 10rem;
			font-size: 5rem;


		}

		.box {
			flex: 1;
			background-color: #ffffff;
			border-radius: 20px;
			margin: 10rem;
			padding: 5rem;
			font-size: 2rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	/deep/ .form-wrap .body {
		min-height: auto;
	}

	.logo {
		width: 30rem;
		margin: 0 auto 4rem;
		display: flex;

		uni-image,
		img {
			width: 100%;
		}
	}

	.version {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 1rem;
		color: #999;
	}
</style>